<template>
  <div class="orders">
    <div class="orders_const">
      <!-- 搜索 -->
      <el-input placeholder="请输入内容" v-model="page.query" class="input-with-select" @input="out">
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%" height="540px">
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="order_number" label="订单编号">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格"> </el-table-column>
        <el-table-column prop="pay_status" label="是否付款">
          <template slot-scope="scope">
            <el-tag effect="dark">{{ scope.row.pay_status == "0" ? "未付款" : "已付款" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货"> </el-table-column>
        <el-table-column prop="create_time" label="下单时间">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time | newtime }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="cateOrders">订单详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑模模态框 -->
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="省市区/县" :label-width="formLabelWidth">
            <el-cascader v-model="Cityvalue" :options="options" :props="props" @change="handleChange"></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 物流信息 -->
      <el-dialog title="订单详情" :visible.sync="dialogFormVisiblecity">
        <el-timeline :reverse="reverse">
          <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp"
            :icon="activity.icon" :color="activity.color">
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getOrders } from "@/utils/http";
import city from "../../../city/city";
export default {
  data() {
    return {
      // 物流信息
      reverse: false,
      options: city,
      Cityvalue: "",
      formLabelWidth: "100px",
      dialogFormVisible: false,
      dialogFormVisiblecity: false,
      props: { expandTrigger: "hover", value: "value", label: "label" },
      page: {
        pagenum: 1,
        pagesize: 10,
        query: "",
      },
      tableData: [],
      form: {
        name: "",
      },
      activities: [
        {
          content: "已签收，感谢使用顺丰，期待再次为您服务",
          timestamp: "2018-04-15",
          icon: "el-icon-more",
          color: "red",
        },
        {
          content:
            "[北京市]北京市海淀育新小区营业点派件员 顺丰速递 95338 正在为你派件",
          timestamp: "2018-04-13",
        },
        {
          content: "快件到达[北京海淀育新小区营业点]",
          timestamp: "2018-04-11",
        },
        {
          content:
            "快件在[北京顺义集散中心]已装车，准备发往[北京海淀育新小区营业点]",
          timestamp: "2018-04-11",
        },
        {
          content: "快件到达[北京顺义集散中心]",
          timestamp: "2018-04-11",
        },
        {
          content: "快件在[北京宝胜营业点]已装车，准备发往[北京顺义集散中心]",
          timestamp: "2018-04-11",
        },
        {
          content: "顺丰速运已收取快件",
          timestamp: "2018-04-11",
        },
        {
          content: "卖家发货",
          timestamp: "2018-04-11",
        },
      ],
    };
  },
  created() {
    this.Orders();
  },
  methods: {
    // 订单详情
    cateOrders() {
      this.dialogFormVisiblecity = true;
    },
    // 选择器值
    handleChange() { },
    // 点击编辑
    handleClick() {
      this.dialogFormVisible = true;
    },
    // 封装列表请求数据
    Orders() {
      getOrders(this.page).then((res) => {
        this.tableData = res.data.goods;
      });
    },
    // 点击搜索
    search() {
      this.tableData = this.tableData.filter((ele) => {
        return ele.order_number.includes(this.page.query);
      });
    },
    out() {
      if (this.page.query == "") {
        this.Orders();
      }
    },
  },
  // 时间过滤
  filters: {
    newtime(time) {
      return new Date(time * 1000).toLocaleString();
    },
  },
};
</script>

<style lang="scss" scoped>
.el-cascader {
  width: 100%;
}

.orders {
  background: white;
  border-radius: 8px;

  .orders_const {
    padding: 15px;
  }

  .input-with-select {
    width: 400px;
    margin-bottom: 10px;
  }
}
</style>